<template>
  <div>
    <div class="page-title" style="width:100%">任务详情</div>
    <div class="page-content">
      <el-row :gutter="10">
        <el-form label-width="87px" :inline="true" :model="filterQuery">
          <el-form-item label="检查时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="filterQuery.startDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="filterQuery.endDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-col>
          </el-form-item>&nbsp;&nbsp;&nbsp;
          <el-form-item label="下达人员">{{ taskRow.issueStaffName }}</el-form-item>
        </el-form>
      </el-row>
    </div>
    <div class="table">
      <el-form label-width="80px" :model="detailData" style="width:100%;">
        <el-row>
          <el-form-item label="检查人员">
            <el-input v-model="detailData.name" style="width: 51%" :disabled="true"></el-input>
          </el-form-item>
          <div style="margin: 20px;"></div>
          <el-table :data="tableData" style="width: 95%" :span-method="objectSpanMethod">
            <el-table-column prop="taskType" label="任务类别" width="180" align="center"></el-table-column>
            <el-table-column label="任务内容" align="center">
              <template slot-scope="scope">
                <div class="list">
                  <el-input v-model="scope.row.taskItem" class="test1" :disabled="true"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="180">
              <template slot-scope="scope">
                <div class="list">
                  <el-input v-model="scope.row.taskNum" class="test1" :disabled="true"></el-input>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </div>
    <div class="page-footer">
      <div>
        <el-button type="primary" @click="handleGetTaskManagementCheck" class="button1">审核</el-button>
        <el-button class="button2" @click="cancels">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { GetTaskManagementDetail,GetTaskManagementCheck } from "../../../services/task_management";
//import {getDay } from "./time"; 
import Vue from "vue";
import VueCookies from "vue-cookies";
Vue.use(VueCookies);

export default {
  data() {
    return {
      pos: 0,
      spanArr: [],
      taskRow: {},
      input: "",
      editAble: true,
      filterQuery: {
        startDate: '',
        endDate: ''
      },
      // data1: {
      //supervisionTaskCode:this.$route.params.supervisionTaskCode
      //},
      detailData: {},
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "班组",
          cont: [
            {
              txt: "现场检查",
              number: 1
            },
            {
              txt: "现场检查",
              number: 1
            }
          ],
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "场所",
          cont: [
            {
              txt: "huogongklu",
              number: 3
            },
            {
              txt: "huogongklu",
              number: 4
            }
          ],
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "关键环节",
          cont: [
            {
              txt: "huogongklu",
              number: 5
            },
            {
              txt: "huogongklu",
              number: 6
            }
          ],
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "专项检查",
          cont: [
            {
              txt: "现场检查",
              number: 1
            },
            {
              txt: "集成检查",
              number: 1
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.taskRow = this.$route.params.taskRow;
    this.init();
    this.handleTaskManagementDetail();
  },
  methods: {
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].taskType === data[i - 1].taskType) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
   },
    init() {
      this.filterQuery.startDate = this.taskRow.startDate
      this.filterQuery.endDate = this.taskRow.endDate ;
    },
    handleGetTaskManagementCheck(){
      let data = {
        supervisionTaskCode: this.taskRow.supervisionTaskCode,
        startDate: this.filterQuery.startDate ,
        endDate: this.filterQuery.endDate ,
        status:'启用'
      }
      GetTaskManagementCheck(data).then(res =>{
        this.$router.go(-1);
        console.log("res", res);
      })
    },
    handleTaskManagementDetail() {
      let params = {
        // supervisionTaskCode: this.taskRow.supervisionTaskID
        supervisionTaskCode: "G01-20200130103344"
      };
      GetTaskManagementDetail(params).then(res => {
        this.tableData = res.data;
        this.getSpanArr(res.data)
      });
    },
    search() {
      console.log("editAble", this.editAble);
    },
    onSubmit() {
      console.log("submit!");
    },
    cancels() {
      console.log("submit!");
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.page-content {
  margin-top: 35px;
}
.test1 {
  margin-bottom: 6px;
}
.page-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.button1 {
  margin-right: 94px;
}
</style>